<template>
    <div ref="editorform" :style="{height:height}" class="ace-editor"></div>
  </template>
  <script>
  import { watch, onMounted, onBeforeUnmount, ref} from "vue";
  import ace from "ace-builds";
  // import "ace-builds/webpack-resolver";
  import "ace-builds/src-noconflict/mode-yaml";
  import "ace-builds/src-noconflict/mode-python";
  import "ace-builds/src-noconflict/mode-sh";
  import "ace-builds/src-noconflict/theme-dracula";
  import "ace-builds/src-noconflict/ext-language_tools";
  import "ace-builds/src-noconflict/ext-emmet";
  import "ace-builds/src-noconflict/snippets/yaml";
  import "ace-builds/src-noconflict/snippets/python";
  import "ace-builds/src-noconflict/snippets/sh";
  //import "ace-builds/src-noconflict/keybinding-vscode";
  //import "ace-builds/src-noconflict/keybinding-emacs";

  export default {
    name: "CodeEditor",
    emits: ["update:value",'on-change-language'],
    props: {
      id: {
        type: Number,
        default: 0,
      },
      // 外部传入的内容，用于实现双向绑定
      value: {
        type: String,
        default: "",
      },
      readonly: {
        type: Boolean,
        default: false,
      },
      height:{
            type:String,
            default:"350px"
      },

      // 编辑器主题色
      theme: {
        type: String,
        default: "dracula",
      },
    },
    
    setup(props, { emit }) {
      let editor = null;
      const editorform = ref(null);
      let options = {
        theme: "ace/theme/" + (props.theme ? props.theme : "dracula"),
        // mode: "ace/mode/" + (props.language ? props.language : "python"),
        maxLines: 25,
        minLines: 25,
        showPrintMargin: false,
        fontSize: 12,
        readOnly: props.readonly ? props.readonly : false,
        tabSize: 4, // tab默认大小
        showPrintMargin: false, // 去除编辑器里的竖线
        highlightActiveLine: true, // 高亮配置
      };
      
      function initialize() {
        if (editor) {
          //实例销毁
          editor.destroy();
        }
        //初始化
        editor = ace.edit(editorform.value, options);
        //代码提示和自动补全
        editor.setOptions({
          enableSnippets: true,
          enableLiveAutocompletion: true,
          enableBasicAutocompletion: true,
        });
        //切换语言
        // editor.session.setMode(`ace/mode/${props.language}`)
        editor.getSession().setUseWrapMode(true);
        // 支持双向绑定
        editor.on("change", () => {
          if (emit) {
            emit("update:value", editor.getValue());
          }
        });
        //切换语言
        function changeLanguage(newLanguage) {
          // const langMode = require(`ace-builds/src-noconflict/mode/${newLanguage}`);
          // ace.configureEditor(editor.value, langMode);
          editor.session.setMode(`ace/mode/${newLanguage}`);
        };
        emit('on-change-language', changeLanguage);
         //快捷键
        editor.commands.addCommand({
          name: 'formatter',
          bindKey: { win: 'Ctrl-Shift-F', mac: 'Command-Shift-F' },
          exec: () => emit('formatter', editor)
        })
        editor.setValue(props.value ? props.value : "");
      }
      watch(
        () => props.id,
        () => {
          initialize();
        }
      );
      watch(
        () => props.value,
        (newProps) => {
          //解决光标移动问题
          const position = editor.getCursorPosition();
          editor.getSession().setValue(newProps);
          editor.clearSelection();
          editor.moveCursorToPosition(position);
        }
      );
      onMounted(() => {
        initialize();
      });
      onBeforeUnmount(() => {
        editor.destroy();
      });
      
      return {
        editorform,
      };
    },
    
  };
  </script>
  <style lang="scss" scoped>
      .ace-chaos .ace_meta.ace_tag{
          color:#53a7e6 !important;
      }
      .ace-chaos .ace_string{
          color:#c58854 !important;
      }
      .ace-chaos .ace_keyword{
          color:#e0e0e0 !important;
      }
      .ace-chaos .ace_constant.ace_numeric{
          color:#c5c454 !important;
      }
  </style>